<template>
	<view v-show="value" :class="['spinner', `spinner--type--${props.type}`]"></view>
</template>

<script lang="ts" setup>
import { inject } from 'vue';

const props = defineProps({
	value: {
		type: Boolean,
		default: false
	},
	type: {
		type: String,
		default: 'default'
	},
	customizeColor: {
		type: String,
		default: null
	},
	vacancyColor: {
		type: String,
		default: '#fff'
	},
	opacity: {
		type: Number,
		default: 0.5
	}
});

const config = inject<any>('config');
const type = props.customizeColor === null ? '1px solid transparent' : `1px solid ${props.customizeColor}`;
</script>

<style lang="scss" scoped>
.spinner {
	width: 20rpx;
	height: 20rpx;
	border-radius: 50%;
	border-top-color: v-bind('props.vacancyColor') !important;
	animation: spin 1s ease-in-out infinite;
	margin: auto;
	opacity: v-bind('props.opacity');

	&--type--default {
		border: 1rpx solid ;
		border-color: v-bind("config.border.default");
	}

	&--type--warn {
		border: 1rpx solid ;
		border-color: v-bind("config.border.warn");
	}

	&--type--info {
		border: 1rpx solid ;
		border-color: v-bind("config.border.info");
	}

	&--type--delete {
		border: 1rpx solid ;
		border-color: v-bind("config.border.delete");
	}

	&--type--succeed {
		border: 1rpx solid ;
		border-color: v-bind("config.border.succeed");
	}

	&--type--customize {
		border: v-bind('type');
	}
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}
</style>
